<!DOCTYPE html>
<html lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="address=no" />
    <title>丸子妈妈-服务地址</title>
    <link rel="stylesheet" type="text/css" href="Public/Wap/v2/css/index.css?v=8" />
    <script src="Public/Wap/js/jquery-2.1.4.min.js?v=8"></script>
    <script src="Public/Wap/v2/js/adaptation.js"></script>    
    <script src="Public/Wap/js/common_v2.js?v=8"></script>
    <script src="Public/layer/layer.js?v=8"></script>
    <link rel="stylesheet" href="Public/Wap/v2/css/mui.picker.min.css?v=8" />
    <script src="Public/Wap/v2/js/mui.min.js"></script>
    <script src="Public/Wap/v2/js/mui.picker.min.js"></script>
    <script src="Public/Wap/v2/js/city.data-3.js"></script>
</head>
<body>
    <div id="wrap" class="pt detail-page houseFrm">
        <div class="header themeRed">
                服务地址
            <a href="javascript:window.history.back();" class="back"></a>
        </div>
        <form class="frmBox mt">
            <dl>
                <dd class="icoUser"><input type="text" id="userName" placeholder="请输入姓名"></dd>
                <dd class="icoTel"><input type="tel" id="phone" placeholder="请输入手机号"></dd>
                <dd class="icoAdr">
                    <span class="choose" id="cityPicker">请输选择区域</span>
                    <input type="hidden" name="area" id="area" value="">
                </dd>
                <dd class="icoTag">
                    <input type="text" id="address" placeholder="请输入门牌信息地址">
                </dd>
            </dl>
        </form>
        <div class="frmBtn">
            <a href="javascript:;" id="btn_sub" class="btnBig">确定</a>
        </div>        
    </div>
    <script>
            var registerUrl= "/wap.php?m=Wap&c=User&a=register";
            var smsUrl = "./api.php?m=api&c=Sms&a=sendSmsCode";
            var flag = 0;
        
            $(function(){
                $("#btn_sub").on("click", function () {
                    var userName = $("#userName").val(),phone = $("#phone").val(), area = $("#area").val(), address = $("#address").val();
                    if (userName == '') {
                        layer.msg("请输入姓名");
                        return false;
                    }
                    if (!validatePhone(phone)) {
                        layer.msg('请填写正确的手机号码');
                        return false;
                    }
                    if(area == ''){
                        layer.msg("请输选择区域");
                        return false;
                    }
                    if (address == '') {
                        layer.msg("请输入门牌信息地址");
                        return false;
                    }
        
                    $.getJSON(registerUrl, {phone:phone, userName: userName}, function(data){
                        if(data.status) {
                            layer.msg(data.msg);
                        }else{
                            layer.msg('注册成功');
                            window.history.go(-2);
                        }
                    });
                });

                //区域选择
                var _getParam = function (obj, param) {
                    return obj[param] || '';
                };
                var cityPicker = new mui.PopPicker({
                    layer: 3
                });

                cityPicker.setData(cityData3);

                var area = $("input[name='area']").val().split('/')

                for (var i = 0; i < cityData3.length; i++) {
                    if (cityData3[i].value == area[0]) {
                        cityPicker.pickers[0].setSelectedIndex(i)
                        var level2 = cityData3[i].children
                        for (var j = 0; j < level2.length; j++) {
                            if (level2[j].value == area[1]) {
                                cityPicker.pickers[1].setSelectedIndex(j)
                                var level3 = level2[j].children
                                if (level3) {
                                    for (var k = 0; k < level3.length; k++) {
                                        if (level3[k].value == area[2]) {
                                            cityPicker.pickers[2].setSelectedIndex(k)
                                            break
                                        }
                                    }
                                }
                                break
                            }
                        }
                        break
                    }
                }

                $("#cityPicker").click(function () {
                    var _self = this;
                    cityPicker.show(function (items) {
                        var text = _getParam(items[0], 'text') + "/" + _getParam(items[1], 'text') + "/" + _getParam(items[2], 'text');
                        $(_self).text(text);
                        var val = _getParam(items[0], 'value') + "/" + _getParam(items[1], 'value') + "/" + _getParam(items[2], 'value');
                        $("input[name='area']").val(val)
                    });
                })
            });
        </script>
</body>
</html>